<!--长效养护-->
<template>
  <page-meta
    :page-font-size="baseFontSize + 'rpx'"
    :root-font-size="baseFontSize + 'rpx'"
  ></page-meta>
  <view class="content">
    <!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
    <z-paging
      ref="paging"
      v-model="dataList"
      :auto-clean-list-when-reload="false"
      :auto-scroll-to-top-when-reload="false"
      :refresher-status.sync="refresherStatus"
      @query="loadList"
    >
      <!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
      <view class="top-wrap">
        <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
        <app-tabs v-model="tabIndex" :tabs="taskAuthType" @change="tabChange"></app-tabs>
        <view>
          <view class="flex align-center" style="position: relative">
            <view class="flex-sub">
              <uni-search-bar
                readonly
                focus
                v-model="formData.belongTo"
                bgColor="#F7F8FA"
                radius="5"
                placeholder=" "
                clearButton="auto"
                cancelButton="none"
                @input="search"
              />
              <song-data-picker
                openSearch
                placeholder="请选择设施"
                popup-title="请选择设施"
                :placeholderStyle="placeholderStyle"
                :localdata="dataTree1"
                v-model="formData.belongTo"
                :border="false"
                @change="onchange1"
                @popupclosed="closeSearch"
              ></song-data-picker>
            </view>
            <view class="filter" @tap="toggleFilter">更多</view>
          </view>
        </view>
      </view>
      <!-- 自定义下拉刷新view -->
      <!-- <template #refresher>
				<custom-refresher :status="refresherStatus" />
			</template> -->
      <view class="item" v-for="(item, index) in dataList">
        <view>
          <view class="flex justify-between align-center" @tap="toTaskDetail(item)">
            <text class="name">{{ item.facilityName }}-{{ item.caseCode }}</text>
            <uni-icons type="forward" size="16" color="#597EF7"></uni-icons>
          </view>
          <view class="flex justify-between align-end">
            <view class="time">
              <view @tap="toTaskDetail(item)">
                {{ item.facilityName }}-{{ item.diseaseLocationName }}-{{
                  item.brokenCommpontName
                }}-{{ item.brokenTypeName }}-{{ item.area < 0 ? 0 : item.area }}㎡
              </view>
              <view>病害位置：{{ item.location }}</view>
              <view style="word-break: break-all" class="img-box">
                <img
                  :src="sitem"
                  v-for="(sitem, index) in calcArr(item.brokenImg)"
                  @click="previewImage(calcArr(item.brokenImg), index)"
                  alt=""
                  mode="widthFix"
                />
              </view>
              <view style="color: red">上报时间：{{ parseTime(item.createTime) }}</view>
              <view style="color: red" v-if="item.turnReason"
                >驳回理由：{{ item.turnReason }}</view
              >
            </view>
            <!-- <view
              class="btn"
              @tap="
                navTo(
                  `/pages/addForm/changxiaoyanghu?id=${item.taskId}&projectName=${item.taskName}&facilityName=${item.facilityName}&placeName=${item.partNames}&compName=${item.compNames}&componentId=${item.compIds}&frequencyValue=${item.frequencyValue}`
                )
              "
              >任务上报</view
            > -->
          </view>
        </view>
      </view>
    </z-paging>
    <!-- 右侧筛选 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content popup-height">
        <view class="drawer-scroll flex-sub">
          <uni-forms
            :modelValue="formData"
            border
            label-width="16rem"
            @touchmove.stop.prevent="() => {}"
          >
            <uni-forms-item label="案卷编号">
              <uni-easyinput
                type="number"
                :placeholderStyle="placeholderStyle"
                v-model="formData.caseCode"
                placeholder="请输入案卷编号"
              />
            </uni-forms-item>
            <uni-forms-item label="案卷上报人">
              <uni-easyinput
                :placeholderStyle="placeholderStyle"
                v-model="formData.reportName"
                placeholder="请输入案卷上报人"
              />
            </uni-forms-item>
            <uni-forms-item label="养护班组">
              <uni-easyinput
                :placeholderStyle="placeholderStyle"
                v-model="formData.taskUserNickname"
                placeholder="请输入养护班组"
              />
            </uni-forms-item>
            <uni-forms-item label="所属设施" name="name">
              <song-data-picker
                openSearch
                placeholder="请选择设施"
                popup-title="请选择设施"
                :placeholderStyle="placeholderStyle"
                :localdata="dataTree1"
                v-model="formData.belongTo"
                :border="true"
              ></song-data-picker>
            </uni-forms-item>
            <uni-forms-item label="处理建议" name="name">
              <uni-tag
                class="tag"
                @click="changeMsg(item)"
                type="primary"
                :inverted="item.value != formData.dealMsg"
                :text="item.text"
                v-for="(item, index) in dealList"
                :key="index"
              />
            </uni-forms-item>
            <uni-forms-item label="创建时间">
              <!-- <view class="flex align-center">
								<uni-easyinput type="number" :placeholderStyle="placeholderStyle" v-model="formData.area" placeholder="请输入养护班组" />
								<text>-</text>
								<uni-easyinput type="number" :placeholderStyle="placeholderStyle" v-model="formData.area" placeholder="请输入养护班组" />
							</view> -->
              <uni-datetime-picker v-model="formData.createTime" type="daterange" />
            </uni-forms-item>
          </uni-forms>
        </view>
        <view class="drawer-ft flex align-center">
          <button class="button flex-sub" type="info" @click="reset()">
            <text class="button-text">重置</text>
          </button>
          <button class="button flex-sub" @click="reload()">
            <text class="button-text">确定</text>
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import appTabs from '@/components/app-tabs.vue';
import { getDmTaskListApi } from '@/api/system/changxiao.js';
import { getFacilityManagePage } from '@/api/system/caseManage.js';
import { getCaseManageApi, getDiseaseListApi } from '@/api/common.js';
import { parseTime } from '@/utils/ruoyi';
export default {
  mixins: [MescrollMixin],
  components: { appTabs },
  data() {
    return {
      list: 20,
      tabIndex: 0,

      taskAuthType: [
        //任务审核进度
        {
          value: 0,
          name: '全部'
        },
        {
          value: 1,
          name: '待复核'
        },
        {
          value: 2,
          name: '处置中'
        },
        {
          value: 3,
          name: '已关闭'
        },
        {
          value: 4,
          name: '待审核'
        },
        {
          value: 5,
          name: '已驳回'
        }
      ],
      topH: 190,
      dataList: [],
      refresherStatus: 0,
      searchValue: '',
      longitude: '',
      latitude: '',
      dataTree1: [],
      facilityId: null,
      device: '',
      formData: {
        belongTo: null,
        dealMsg: null
      },
      dealList: []
    };
  },
  computed: {
    baseFontSize() {
      return this.$store.getters.fontSize;
    }
  },
  created() {
    this.startLocationUpdate();
    this.getDataTree1();
    this.getDiseaseDealList();
  },
  onShow() {
    this.$refs.paging.reload();
  },
  methods: {
    closeSearch() {
      this.device = '';
    },
    onchange1(e) {
      const current = this.dataTree1.find(
        (item) => item.value === e.detail.value[0]?.value
      );
      console.log(
        '%c [ current ]-165',
        'font-size:13px; background:pink; color:#bf2c9f;',
        current
      );
      this.formData.belongTo = (current && current.id) || '';
      this.$refs.paging.reload();
    },
    /* 切换选择设备 */
    onchangeFacility() {
      const current = this.dataTree1.find(
        (item) => item.value === e.detail.value[0]?.value
      );
      this.formData.belongTo = (current && current.id) || '';
    },
    reload() {
      this.$refs.paging.reload();
      this.$refs.popup.close();
    },
    /* 重置 */
    reset() {
      this.formData = {
        belongTo: null,
        dealMsg: null
      };
      this.$refs.paging.reload();
    },
    async getDataTree1() {
      const res = await getFacilityManagePage({
        pageNo: 1,
        pageSize: 10000,
        longitude: this.longitude,
        latitude: this.latitude
      });
      this.dataTree1 = res.data.list?.map((item) => ({
        ...item,
        text: item.facilityName,
        value: item.id
      }));
    },
    startLocationUpdate() {
      uni.startLocationUpdate({
        success: (res) => {
          //成功的逻辑
          uni.onLocationChange((data) => {
            let latitude = data.latitude.toFixed(6);
            let longitude = data.longitude.toFixed(6);
            this.latitude = latitude || '';
            this.longitude = longitude || '';
          });
        },
        fail: (err) => {
          console.log(err);
          //失败的逻辑
          //1.wx.showModal引导用户授权
          //2.通过wx.openSetting让用户开启权限
          uni.showModal({
            //引导用户授权
            title: '提示',
            content: '请打开定位权限',
            confirmText: '设置',
            cancelText: '取消',
            showCancel: false,
            success: (res) => {
              //点击“确认”时打开设置页面
              if (res.confirm) {
                uni.openSetting({
                  //打开设置页面让用户选择权限
                  success: (res) => {
                    console.log(res);
                    if (res.authSetting['scope.userLocation'] == true) {
                      uni.onLocationChange((data) => {
                        //实时获取用户最新的经纬度信息
                        console.log(data);
                      });
                    }
                  }
                });
              } else {
                //取消打开设置授权页面
                uni.showToast({
                  title: '取消授权',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    },
    parseTime(time) {
      return parseTime(time);
    },
    calcArr(str) {
      if (!str) {
        return [];
      } else {
        return str.split(',');
      }
    },
    previewImage(photoImg, index) {
      uni.previewImage({
        current: index,
        urls: photoImg
      });
    },
    toTaskDetail(item) {
      uni.setStorageSync('taskDetail', item);
      this.navTo(
        `/pages/addForm/xunchafuhe?facilityName=${item.facilityName}&facilityId=${item.belongTo}&caseCode=${item.caseCode}&caseStatus=${item.caseStatus}`
      );
      // this.navTo(
      //   `/pages/richangxuncha/shigongshangbaoxiangqing?id=${item.taskId}&taskName=${item.taskName}&caseStatus=${item.caseStatus}&caseCodes=${item.caseCodes}&expectEndDate=${item.expectEndDate}&facilityName=${item.facilityName}&placeName=${item.partNames}&compName=${item.compNames}&componentId=${item.compIds}&frequencyValue=${item.frequencyValue}`
      // );
    },
    search(e) {
      this.loadList(1, 10);
    },

    tabChange(e) {
      this.$refs.paging.reload();
    },
    loadList(pageNo, pageSize) {
      // 调用接口获取列表数据
      let createTime = this.formData.createTime;
      if (createTime && createTime.length > 0) {
        createTime = [createTime[0] + ' 00:00:00', createTime[1] + ' 23:59:59'];
      }
      console.log('createTime', createTime);
      getCaseManageApi({
        // belongTo: this.formData.facilityId,
        ...this.formData,
        createTime: createTime,
        caseStatus: this.tabIndex == 0 ? null : this.tabIndex,
        pageNo: pageNo,
        pageSize: pageSize
      })
        .then((res) => {
          this.$refs.paging.complete(res.data.list);
        })
        .catch((res) => {
          this.$refs.paging.complete(false);
        });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback() {
      // this.getProductList();
    },
    navTo(path) {
      this.$tab.navigateTo(path);
    },
    changeFontSize(fontSize) {
      this.baseFontSize = fontSize;
    },
    /* 打开右侧筛选 */
    toggleFilter() {
      console.log('哈哈哈');
      this.$refs.popup.open('right');
    },
    // 处置建议
    getDiseaseDealList() {
      getDiseaseListApi({
        pageNo: 1,
        pageSize: 100,
        dictType: 'deal_type'
      }).then((res) => {
        this.dealList = res.data.list.map((item) => {
          return {
            ...item,
            text: item.label,
            value: Number(item.value)
          };
        });
      });
    },
    changeMsg(item) {
      console.log('jhahja', item.value);
      if (this.formData.dealMsg != item.value) {
        this.formData.dealMsg = item.value;
      } else {
        this.formData.dealMsg = null;
      }
      // this.$forceUpdate();
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';

.list-area {
  height: 300upx;
}

.u-page {
  background: #fff;
  height: 100vh;
}

.top-wrap {
  z-index: 100;
  position: sticky;
  top: 0;
  background: #f1f1f1;
  // position: fixed;
  // top: 0;
  // left: 0;
  // width: 100%;
  // background: #fff;
  // padding: 0 22upx;
}

.btn {
  color: #fff;
  width: 160upx;
  height: 4.8rem;
  background: #597ef7;
  border-radius: 8upx;
  color: #fff;
  line-height: 4.8rem;
  text-align: center;
}

/deep/ .top-wrap .uni-searchbar {
  background: #f1f1f1;
}
.fontList {
  position: fixed;
  display: flex;
  justify-content: space-around;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30upx 20upx;
  background: #fff;
}
.time view:nth-of-type(2) {
  display: flex;
  margin: 10upx 0;
  img {
    width: 200upx;

    margin-right: 5upx;
  }
}
/deep/.top-wrap .uni-searchbar__box-search-input {
  height: 40upx !important;
  opacity: 0;
}
.img-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  grid-gap: 40rpx;
  gap: 40rpx;
  img {
    width: 66px;
  }
}
/deep/ .top-wrap .uni-data-tree {
  top: 19upx;
  position: absolute;
  padding: 0 70rpx;
  left: 0;
  right: 80upx;
}
.filter {
  font-size: 2.8rem;
  padding: 0 20upx;
}
.popup-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  background-color: #fff;
  flex-direction: column;
}

.popup-height {
  height: 100%;
  width: 90vw;
}
.drawer-scroll {
  width: 100%;
  height: 0;
  overflow: auto;
}
.drawer-ft {
  width: 100%;
  padding: 20upx 0 calc(20upx + env(safe-area-inset-bottom) / 2);
  .button {
    line-height: 35px;
    font-size: 14px;
    height: 35px;
    margin: 0 5px;
    border-radius: 5px;
    & + .button {
      background: $uni-primary;
      color: #fff;
    }
  }
}
.tag {
  display: inline-block;
  margin: 20upx 5upx;
}
/deep/ .uni-date__x-input {
  font-size: 12px;
  padding: 0;
}
/deep/ .input-value {
  line-height: 30px;
}
</style>
